import React from "react";

function get() {
    return document.getElementsByTagName('html')[0];
}

export function setProperty(options) {
    //参数： component
    let html = document.getElementsByTagName('html')[0];
    let className = html.className;
    let styles = html.getAttribute('style');
    let componentDidMount, componentWillUnmount;

    return (Component) => {
        const prototype = Component.prototype;

        componentDidMount = componentDidMount || prototype.componentDidMount;
        componentWillUnmount = componentWillUnmount || prototype.componentWillUnmount;

        prototype.componentWillUnmount = function () {
            // document.title = '';
            html.className = className;
            html.setAttribute('style', styles || '');
        };

        prototype.componentDidMount = function () {
            if (options?.title) {
                // document.title = options?.title;
            }

            if (options?.className) {
                html.className = options?.className;
            }
        };
    };
}

let titleTimeout;
export function setTitle(title) {
    // let titleElement = document.getElementsByTagName('title')[0];

    return Component => function () {
        Component.title = title;


        return {
            componentDidMount() {
                // if (this.props.history.action === 'POP') {
                //     document.title = '嗷嗷嗷';
                //     return;
                // }
                //title闪烁的问题日后解决
                clearTimeout(titleTimeout);
                titleTimeout = setTimeout(() => {
                    if (typeof title === 'function') {
                        document.title = title(this.props) || '';
                    } else {
                        document.title = title || '';
                    }
                });
            },
            render() {
                return <Component {...this.props}/>;
            },
            // componentWillUnmount() {
            //     document.title = titleElement.getAttribute('data-default');
            // }
        };
    };
}

export function setStyles(styles) {
    let html = get();
    return Component => function () {
        // Component.title = Component.title;

        return ({
            componentDidMount() {
                this._styles = html.getAttribute('style');
                html.setAttribute('style', this._styles);
            },
            componentWillUnmount() {
                if (this._styles) {
                    html.setAttribute('style', this._styles);
                } else {
                    html.removeAttribute('style');
                }
            },
            render() {
                return <Component {...this.props} />;
            }
        })
    };
}

export function setClass(className) {
    let html = get();
    return Component => function () {
        return {
            componentDidMount() {
                this._className = html.getAttribute('class');
                html.setAttribute('class', className);
            },
            componentWillUnmount() {
                if (this._className) {
                    html.setAttribute('class', this._className);
                } else {
                    html.removeAttribute('class');
                }
            },
            render() {
                return <Component {...this.props} />;
            }
        };
    };
}